<template>
    <div>
        <h3>父组件</h3>
        <p>{{ msg }}</p>
        <input type="text" v-model="msg">
        <h4>{{ temp }}</h4>
        <!-- 
            1.子组件在父组件中使用时，是以自定义标签方式使用，所有子组件的标签属于父容器的范围
            可以使用vue的指令语法为该自定义标签绑定自定义属性
            2.子组件标签在页面渲染后，并不会保留在HTML的dom上
            3. 子组件标签上绑定的属性 会直接作为子组件跟标签的属性
            4.子组件中定义props属性 进行父组件传递数据的拦截和监控处理
            props在组件渲染之前，就完成了父组件数据的拦截操作  ==>参数不再出现在子组件的标签上

            开发原则：被传递的数据在子组件的props属性中 建议保留原始变量名
         -->
        <ChildComponent ></ChildComponent>
        <!-- 
            1.子组件在父组件中使用时，是以自定义标签方式调用
            所以 所有子组件标签是属于父组件容器的范围
            可以通过v-on方式为子组件标签绑定自定义事件
            2.在子组件标签上绑定的事件，会直接在子组件进行渲染时被拦截
            被拦截的事件会直接存放于子组件的实例属性_events中
            _events:{
                key:绑定的事件名称
                value:处理的执行方法数组
            }
            3.需要实现子组件向父组件传递数据是，构建事调用的方法不能加（）
            4.子组件的数据的变更不会直接影响父组件数据的变化
                如果要实现子组件变更的同时父组件同样变化，开发时只能定义调用规则
            5.被组件拦截绑定的事件，可以通过vue的实例方法$emit()进行触发
            组件中的$emit就是为了触发定义在组件_events中的事件
            vm.$emit(eventName[,params])
            eventName  事件名 特指_events中的key值  取值为string
            params 事件形参  触发事件时所携带的参数，只能携带一个参数，但是不限制类型

            开发原则：组件绑定的事件最好不要和w3c规范的事件重名

         -->
         <!-- 
             如果希望子组件绑定的事件直接传给子组件的根标签  为当前事件添加修饰符 .native  
             .native 修饰符 不会被子组件进行拦截
          -->
        <ChildComponentTwo @click.native="print" @getMsg="getMsg"></ChildComponentTwo>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent'
import ChildComponentTwo from './ChildComponentTwo'
export default {
    data(){
        return {
            msg:"父组件的数据",
            info:"测试",
            obj:{},
            num:"123",
            temp:""
        }
    },
    components:{
        ChildComponent,ChildComponentTwo
    },
    methods:{
        print(){
            console.log(111);
        },
        getMsg(arg){
            console.log("父组件中方法调用",arg);
            this.temp=arg;
        }
    }
}
</script>